<template>
	<view class="container">
		<zero-lazy-load imgMode='widthFix'
			image="https://qn.mtj.cdydsy.com/uploads/spread/20250422/image/35e2203a6f0e15d64f4551c9d7462de9.png"
			class="image"></zero-lazy-load>
		<view class="time" :style="{ top: timeTop + 'px' }" @click="timeChange">跳过 {{ countdown }}</view>
	</view>
</template>

<script setup>
	import { computed, ref, onMounted, onUnmounted } from 'vue';
	import { getNavbarHeight } from '@/utils/system.js';
	import { switchTab } from '@/utils/router.js'

	const countdown = ref(3); // 倒计时初始值为 3
	const timeTop = computed(() => getNavbarHeight() + 30);

	let timer; // 定时器

	onMounted(() => {
		timer = setInterval(() => {
			if (countdown.value > 1) {
				countdown.value--;
			} else {
				clearInterval(timer);
				switchTab('/pages/index/index')
			}
		}, 1000);
	});

	const timeChange = () => {
		clearInterval(timer);
		switchTab('/pages/index/index')
	}

	onUnmounted(() => {
		clearInterval(timer); // 组件卸载时清除定时器
	});
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

		.image {
			width: 100%;
			height: 100%;
			display: block;
		}

		.time {
			width: 133rpx;
			height: 60rpx;
			border-radius: 40rpx;
			font-size: $font-size-28;
			color: $base-color-white;
			background-color: rgba(0, 0, 0, 0.1);
			position: absolute;
			right: 30rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1rem;
		}
	}
</style>